// JavaScript Document


window.onload=function(){
	var oScrollBar = document.getElementById('scrollBar');
	var oScrollDrag = document.getElementById('scrollDrag');
	var oScrollStage = document.getElementById('scrollStage');
	var oSrcollCont = document.getElementById('srcollCont');
	
	var oScrollBar2 = document.getElementById('scrollBar2');
	var oScrollDrag2 = document.getElementById('scrollDrag2');
	var oScrollStage2 = document.getElementById('scrollStage2');
	var oSrcollCont2 = document.getElementById('srcollCont2');
	
	scrollBar(oScrollBar,oScrollDrag,oScrollStage,oSrcollCont);
	
	scrollBar(oScrollBar2,oScrollDrag2,oScrollStage2,oSrcollCont2);

	
	function scrollBar(oScrollBar,oScrollDrag,oScrollStage,oSrcollCont)
	{	
		var disY=0;
		var bBtn=true;
		var T=0;
		
		oScrollDrag.onmousedown=function(ev)
		{
			var ev = ev || event;
			disY = ev.clientY-oScrollDrag.offsetTop;
			
			if(oScrollDrag.setCapture)
			{
				oScrollDrag.setCapture();
			}
			
			document.onmousemove=function(ev)
			{
				var ev = ev || event;
				T = ev.clientY-disY;
				toChange();
			};
			
			document.onmouseup=function()
			{
				document.onmousemove=null;
				document.onmouseup=null;
				
				if(oScrollDrag.releaseCapture)
				{
					oScrollDrag.releaseCapture();
				}
			};
			
			return false;
		};
		
		//滚动条事件IE,chrome:onmousewheel FF:DOMMouseScroll
		if(oScrollBar.addEventListener)
		{
			oScrollBar.addEventListener('DOMMouseScroll',scrollBar,false);
			oSrcollCont.addEventListener('DOMMouseScroll',scrollBar,false);
		}
		oScrollBar.onmousewheel=scrollBar;
		oSrcollCont.onmousewheel=scrollBar;
		
		function scrollBar(ev)
		{
			var ev=ev || event;
			
			if(ev.detail)
			{
				bBtn=ev.detail>0 ? true : false;  //标准下的滚动条事件属性
			}
			else
			{
				bBtn=ev.wheelDelta<0 ? true : false;
			}
			
			if(bBtn)
			{
				T=oScrollDrag.offsetTop+10;
			}
			else
			{
				T=oScrollDrag.offsetTop-10;
			}
			
			toChange();
			ev.preventDefault();
		};
		function toChange()
		{
			if(T<0)
			{
				T=0;
			}
			else if(T>oScrollBar.offsetHeight-oScrollDrag.offsetHeight)
			{
				T=oScrollBar.offsetHeight-oScrollDrag.offsetHeight;
			}
			
			oScrollDrag.style.top = T + 'px';
			var scaleY = T/(oScrollBar.offsetHeight-oScrollDrag.offsetHeight);  //滚动条的比例
			if(oSrcollCont.offsetHeight>oScrollStage.offsetHeight)
			{
				oSrcollCont.style.top = -scaleY*(oSrcollCont.offsetHeight-oScrollStage.offsetHeight) + 'px';
			}
		}
	}
	//滚动条的高度比例 比例=能滚动的高度/整个滚动内容的高度
	//var scaleH=1-(oSrcollCont.offsetHeight-oScrollStage.offsetHeight)/oSrcollCont.offsetHeight;
	//oScrollDrag.style.height=scaleH*oScrollBar.offsetHeight+'px';
};